import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
const scale = GLOBAL.SCALE;
export class SelectMore extends Component {

	constructor(props) {
		super(props);
		this.params = props || {};
		console.log(props)
		this.state = {
			onOff: this.props.onOff
		}
	}
	_selectFn = (index, onOff) => {
		this.setState({
			onOff: !onOff,
		}, function () {
			this.props.callback && this.props.callback(index, !onOff);
		});
	}

	componentWillReceiveProps(props) {
		if (props) {
			this.setState({ onOff: props.onOff })
		}
	}

	// 跳新增地址页面
	_gotoAddPage = () => {
		this.props.propsData.navigation.navigate('AddAddressPage',
			this.params,
		);
	}

	render() {
		// edit --可编辑
		let { item, edit, index } = this.props
		let { detailAddress, companyName, warehouseName, addressName, fullName } = item;
		let { onOff } = this.state;
		let rightImg = require('../../../../imgs/global/success.png');
		let emptyImg = require('../../../../imgs/global/option.png');
		let sourceImg = onOff ? rightImg : emptyImg;
		warehouseName = addressName || warehouseName;
		return (
			<TouchableOpacity style={styles.itemData} onPress={() => { this._selectFn(index, onOff) }}>
				<Image source={sourceImg} style={styles.radius} />
				<View style={styles.dataWrap}>
					<Text numberOfLines={2} style={styles.itemTitle}>{warehouseName}{warehouseName ? '（' : ''}{companyName}{warehouseName ? '）' : ''}</Text>
					{/* {(provinceCode || cityCode || areaCode || detailAddress) ? <Text numberOfLines={2} >{provinceCode && provinceName ? provinceName : ''}{cityName && cityCode ? cityName : ''}{areaName && areaCode ? areaName : ''}{detailAddress}</Text> : null} */}
					{(fullName || detailAddress) ? <Text numberOfLines={2} >{fullName ? fullName : ''} {detailAddress}</Text> : null}
				</View>
				{edit ?
					<TouchableOpacity style={styles.editBox} onPress={() => { this._gotoAddPage() }}>
						<Text style={styles.editText}>编辑</Text>
					</TouchableOpacity> : null
				}

			</TouchableOpacity>
		)
	}
}
const styles = StyleSheet.create({
	itemData: {
		paddingLeft: 15 * scale,
		paddingRight: 15 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		height: 74 * scale
	},
	radius: {
		width: 14 * scale,
		height: 14 * scale,
		marginRight: 10 * scale
	},
	itemTitle: {
		fontSize: 14 * scale,
		color: style.color.normal,
		marginBottom: 5 * scale
	},
	dataWrap: {
		paddingRight: 10 * scale,
		flex: 1
	},
	editBox: {
		// backgroundColor: 'red',
		paddingLeft: 10 * scale,
		height: '50%',
		justifyContent: 'center',
		borderLeftWidth: 1 * scale,
		borderLeftColor: style.color.border
	},
	editText: {
		color: style.color.themeColor,
		fontSize: 14 * scale,
	}
})